<template>
	<view class="content">
		<div class="top">

		</div>
		<div class="content-form">
			<!-- <div class="title-row">输入卡号、20位ICCID/备注</div> -->
			<input v-model="cardNumber" class="uni-input" placeholder-style="color:#999999" placeholder="请输入卡号或ICCID" @input='disabled=false'/>
			<input v-model="remark" class="uni-input" placeholder-style="color:#999999" placeholder="请输入备注" @input='disabled=false'/>
			<div class="deal-check-box" >
				<checkbox-group @change="dealCheck"  v-if="dealList.length!=0"><checkbox value="1" style="transform:scale(0.7)"  class="check-box-select" /><span>我已阅读并同意协议</span></checkbox-group>
						
					<a @click="openDeal(item)" v-for="(item,index) in dealList">《{{item.title}}》</a>
						
			</div>
			<button type="primary" style="margin-top: 10px; width: 90%; margin-left:auto; margin-right:auto;" @click="addCard" :disabled="disabled">确定</button>
		</div>
		<div style="display: flex;align-items: center;margin-top: 30px;">
			<div class="line" style=""></div>
			<span style="font-size:small;">温馨提示</span>
			<div class="line" style="margin-left: 0px;"></div>
		</div>
		<ul style="width: 80%;text-align: left;font-size: small;color:#007AFF;margin: 20px auto;">
			<li>如果卡号错误请输入ICCID进行校验</li>
			<li>备注的长度最多8个汉字</li>
		</ul>
		<uni-popup ref="popup" type="bottom" class="bottom-popup" @touchmove.stop.prevent="clear">
			<div class='scrollBlock'>
				<div class='div_top'>
					<div class="font-1">{{detailDeal.title}}</div>
					<div class="font-2">请详细阅读协议介绍</div>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<div class='div_body'>
					<div class="head-detail" v-html="detailDeal.content" ></div>
				</div>
			</div>
		</uni-popup>
		<!-- <uni-popup ref="popup1" type="bottom" class="bottom-popup">
			<div class="deal-content">
				<div class="select-top">
					<div class="font-1">{{detailDeal.title}}</div>
					<div class="font-2"> 请详细阅读协议介绍</div>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<div class='scrollBlock'>
					<div class="head-detail" v-html="showContent()" ></div>
				</div>
				
				<div class="select-form"></div>
				<div style="height: 40px;width: 100%;"></div>
			</div>
		</uni-popup> -->
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addCardUrl: "card-customer/tieUserCard",
				dealListUrl:'agreement/getLoginProtocol/white',
				cardNumber: '',
				remark:"",
				pagekey: '',
				disabled: false,
				dealIfCheck:false,
				showDialogue:true,
				dealList:[],
				detailDeal:{}
			}
		},
		async onLoad(){
			
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			let objs= await this.$req.crm(this.dealListUrl,{dictType: 'C_APP'})
			this.dealList= objs.data
		},
		methods: {
			dealCheck(val){
				if(val.detail.value.length>0){
					this.dealIfCheck = true
				}else{
					this.dealIfCheck = false
				}
			},
			showContent(){
				return this.detailDeal.content
			},
			openDeal(item){
				this.detailDeal = item
				this.$refs.popup.open()
			},
			closepop() {
				this.$refs.popup.close()
			},
			async addCard() {
				
				if (this.cardNumber == null || this.cardNumber == '') {
					this.$message('请输入卡号或者填写ICCID')
					return
				}
				if (this.remark == null || this.remark == '') {
					this.$message('备注不能为空')
					return
				}
				if(!this.dealIfCheck&&this.dealList.length!=0){
					this.$message('请阅读并同意协议内容！')
					return
				}
				
				this.disabled = true;
				try{
				await this.$req.userData(this.addCardUrl, {
					cardNumber: this.cardNumber,
					remark:this.remark,
				}).then(res=>{	
					if(res._result){
						uni.switchTab({
							url: `/pages/tabbar/cardList/cardList`
						})
						this.getKey();
					}
					this.disabled = false;
				})	
				}catch(e){
					console.log(e)
					this.disabled = false;
				}
				
			},
			async getKey(){
				this.pagekey = await this.$getPageKey();
			}
		}
	}
</script>

<style lang="scss">
	ul>li{
		margin: 0;
		padding: 0;
	}
	.top {
		text-align: center;
		background-image: url(../../../static/addcard_bg.png);
		background-size: 100% 100%;
		background-position: center center;
		height: 49%;
	}

	.content {
		text-align: center;
		width: 100%;
		height: calc(100vh - 47px) !important;
		position: absolute;
		top: 0px;
		left: 0px;
		overflow-y: scroll;
	}
	.line{
		
		width: 38%;
		margin-left: 5%;
		
		background-color: $theme-color;
		height: 1px;
	}

	.title-row {
		margin-left: 5%;
		text-align: left;
		font-size: medium;
	}

	.panel-add {
		width: 100%;
		height: 100%;
	}

	.add-card-font-title {
		margin-top: 240upx;
		font-size: larger;
		font-weight: bold;
		color: white;
	}

	.add-card-font-row-2 {
		color: #99b5fd;
		font-size: small;
		letter-spacing: 7upx;
		margin-top: 20upx;
	}

	.content-form {
		margin-top: -200upx;
		width: 100%;
	}

	.uni-input {
		border: 1px solid #999999;
		color: #999999;
		width: 90%;
		border-radius: 5px;
		margin: 20px auto;
		height: 35px;

	}

	.add-btn {
		width: 50%;
		border: 1px solid white !important;
		color: white !important;
		border-radius: 25px;
	}
	.deal-check-box{
		font-size: 24upx;
		display: flex;
		margin-left: 20px;
		align-items: center;
		word-break:break-all;
		max-width: 90%;
		text-align: left;

	}
	.deal-check-box a{
		color:$theme-color
	}
.bg-popup {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.card-bottom-popup {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 0 40upx 0;
		background-color: #ffffff;
		overflow-y: scroll;
		border-radius: 5px 5px 0 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		// margin-bottom: 30px;
	}
	.deal-content {
		width: 100%;
		height: 40%;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		max-height: 400px;
		overflow-y:scroll;

	}
	.select-form {
		padding-top: 10px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	
	}
	
	
	
	.select-top {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: $theme-color;
		height: 100upx;
		width: 100%;
		padding: 10upx 0;
		position: absolute;
		top: 0px;
		left: 0px;
		color: white;
	
		
	}
	.scrollBlock{
		width: 100%;
		height: 50vh;
		position: relative;
		bottom: 50px;
		left: 0;
		background-color: white;
		overflow: hidden;
	}
	.div_top{
		width:100%;
		height: 100upx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #78A8F2;
		color: #fff;
		padding: 20upx 0;
		z-index: 100;
	}
	.font-1 {
		height: 60upx;
		line-height: 60upx;
		width: calc(100vw - 20px);
		margin-left: $left-10;
		text-align: left;
	}
		
	.font-2 {
		height: 40upx;
		line-height: 40upx;
		text-align: left;
		margin-top: 2px;
		font-size: small;
		margin-left: $left-10;
	}
	.div_body{
		width: 100%;
		height: calc(50vh - 140upx);
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 20upx 0;
		overflow-y: scroll;
	}
	.head-detail {
		padding: 15px 0;
		width: 90%;
		
		height: auto;
		white-space: pre-wrap;
		font-size: 34upx;
		line-height: 46upx;
		color: #333;
		word-break:break-all;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
</style>
